import { defineStore } from 'pinia'
import { computed, ref } from 'vue'
import _ from 'lodash'
import cfg from '@/config/config'
import type { MenuItem, BreadItem } from '@/config/types'


export const useLayoutStore = defineStore('layout', () => {
  const logo = computed<string>(() => cfg.logoPath)
  const title = computed<string>(() => cfg.title)

  const collapsed = ref<boolean>(false)
  const fullscreen = ref<boolean>(false)
  const sideWidth = ref<number>(cfg.sideWidth)

  const routerActive = computed<boolean>(() => cfg.routerActive)
  const routerAnimate = computed<string>(() => cfg.routerAnimate)
  const tabType = computed<string>(() => cfg.tabType)

  const activePath = ref<string>('')
  const menus = computed<MenuItem[]>(() => cfg.menus)
  const breads = ref<BreadItem[]>([])
  const histories = ref<BreadItem[]>([])

  function toggleCollapsed() {
    collapsed.value = collapsed.value ? false : true
    if (collapsed.value) {
      sideWidth.value = 80
    } else {
      sideWidth.value = cfg.sideWidth
    }
  }

  function toggleFullscreen() {
    fullscreen.value = fullscreen.value ? false : true
  }

  function updateBreads(items: any[]) {
    breads.value = _.map(items, (item) => {
      return { path: item.path, title: item.meta.title }
    })
  }

  function handleTabAdd(tab: BreadItem) {
    if (histories.value.findIndex((item) => item.path === tab.path) === -1) {
      histories.value.push(tab)
    }
    activePath.value = tab.path
  }

  function handleTabRemove(path: string) {
    const idx: number = histories.value.findIndex((item) => item.path === path)
    histories.value.splice(idx, 1)

    if (activePath.value == path) {
      const choosed: BreadItem = histories.value[idx >= histories.value.length ? idx - 1 : idx]
      activePath.value = choosed.path
    }
  }

  function handleCloseTabAll(keeps: string[] = []) {
    const panes: BreadItem[] = histories.value.filter((item) => keeps.includes(item.path))
    histories.value = panes
    if (panes.findIndex((item) => item.path === activePath.value) === -1) {
      const last: BreadItem = panes[panes.length - 1]
      activePath.value = last ? last.path : ''
    }
  }

  function handleCloseOther() {
    handleCloseTabAll([activePath.value])
  }

  function handleCloseCurrent() {
    handleTabRemove(activePath.value)
  }

  function handleTabChoose(path: string) {
    activePath.value = path
  }

  function handleTabDrop(command: string) {
    switch (command) {
      case 'closeAll':
        handleCloseTabAll()
        break
      case 'closeOther':
        handleCloseOther()
        break
      case 'closeCurrent':
        handleCloseCurrent()
        break
    }
  }

  return {
    logo,
    title,

    collapsed,
    fullscreen,
    sideWidth,
    toggleCollapsed,
    toggleFullscreen,

    routerActive,
    routerAnimate,
    tabType,

    activePath,
    menus,
    breads,
    histories,

    updateBreads,
    handleTabAdd,
    handleTabRemove,
    handleTabChoose,
    handleTabDrop
  }
})
